import * as THREE from 'three'
import { Component} from '@/libs/mini3d'
import {transfromGeoJSON } from '../utils'
import { geoMercator } from 'd3-geo'
import allConfig from '@/config'
let geoProjection = geoMercator().center(allConfig.center).scale(600).translate([0, 0])  // 将经纬度转投影成坐标
export class BaseMap extends Component {
  constructor(base, config = {}) {
    super(base)
    // 创建一个组
    this.mapGroup = new THREE.Group()
    // 坐标数组
    this.coordinates = []
    this.config = Object.assign(
      {
        data: '',
        renderOrder: 1,
        topFaceMaterial: new THREE.MeshBasicMaterial({
          color: 0x18263b,
          transparent: true,
          opacity: 1,
        }),
        sideMaterial: new THREE.MeshBasicMaterial({
          color: 0x07152b,
          transparent: true,
          opacity: 1,
        }),
        depth: 0.1,
      },
      config,
    )
    let mapData = transfromGeoJSON(this.config.data)
    if (config.isChina) {
      geoProjection = geoMercator().center(allConfig.center).scale(17).translate([0, 0])  // 将经纬度转投影成坐标
    } else {
      geoProjection = geoMercator().center(allConfig.center).scale(120).translate([0, 0])  // 将经纬度转投影成坐标
    }
    this.create(mapData)
  }
  create(mapData) {
    mapData.features.forEach(feature => {
      // 创建三维实体
      const group = new THREE.Object3D()   // 创建实体
      // let { name, center, centroid } = feature.properties
      let { name, center = [], centroid = [] } = feature.properties
      this.coordinates.push({ name, center, centroid })
      if (name === allConfig.provinceName && !this.config.isChina) {
        return false
      }
      feature.geometry.coordinates.forEach(multiPolygon => {
        multiPolygon.forEach((polygon) => {
          // 绘制shape
          const shape = new THREE.Shape()
          for (let i = 0; i < polygon.length; i++) {
            if (!polygon[i][0] || !polygon[i][1]) {
              return false
            }
            if (i%2 == 0 || i === 0){
              const [x, y] = geoProjection(polygon[i])
              if (i === 0) {
                shape.moveTo(x, -y)
              }
              shape.lineTo(x, -y)
            }
          }
          // 拉伸设置
          const extrudeSettings = {
            depth: this.config.depth, // 挤出的形状的深度
            bevelEnabled: true,  // 对挤出的形状应用是否斜角
            bevelSegments: 1,   // 斜角的分段层数
            bevelThickness: 0.1,  // 设置原始形状上斜角的厚度
          }
          const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
          // 将几何体在x和y和z上移动响应的距离
          geometry.translate(0, 0, this.config.depth)
          // 创建一个模型
          const mesh = new THREE.Mesh(geometry, [this.config.topFaceMaterial.clone(), this.config.sideMaterial.clone()])
          mesh.renderOrder = this.config.renderOrder
          mesh.name = name
          mesh.center =  centroid.length > 0? centroid: center
          // mesh.scale.set(0.02, 0.02, 0.02)
          group.add(mesh)
        })
      })
      this.mapGroup.add(group)
      this.mapGroup.name = this.config.name
    })
  }
  getCoordinates() {
    return this.coordinates
  }
  join() {
    this.mapGroup.name = '初始化的地图'
    this.base.scene.add(this.mapGroup)
  }
}
